import React, { useEffect, useState } from 'react'
import { Button, Dropdown, Empty, message, notification, Spin, Typography } from 'antd'
import useGetTableData from '@/hooks/useGetTableData'
import {
  editImportExcelProductSpuInfo,
  exportExcelProductSpuInfo,
  getSpuPageList,
  importExcelProductSpuInfo,
  importFranchiseInfoProductSpuInfo,
  importProductFabricForSpu,
  importWeightInfoProductSpuInfo,
  productSpuInfoBatchUpdateStatus,
} from '@/api/goods'
import SearchForm from '@/components/CustomForm/SearchForm'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { useIndexColumns } from './columns'
import { ITableData } from './types'
import CustomTable from '@/components/CustomTable'
import {
  IMPORT_FILE_ENUM,
  PUSH_STATE_STATUS_OPTIONS,
  STATUSBANDOPTIONS,
  STATUSBANDOPTIONS_SPEC,
  STATUSNUM,
} from '@/constant'
import { useNavigate } from 'react-router-dom'
import { useAppSelector } from '@/store/hooks'
import './index.less'
import { PURCHASEWAY_OPTIONS } from '@/constant/purchase'
import { getProductColorPageList, getProductFabricPageList, getSpuOptions, productSpuInfoPush } from '@/api/goods'
import { ITableDataColor, ITableDataFabric } from '../Style/types'
import dayjs from 'dayjs'
import useGetProDevSeason from '@/hooks/useGetProDevSeason'
import {
  downloadByUrl,
  exportNotification,
  getRecentThreeMonths,
  importNotification,
  importNotificationByFirstErrorMsg,
} from '@/utils/util'
import { UploadOutlined, ImportOutlined, DownOutlined } from '@ant-design/icons'
import ImportFileModal from '@/components/ImportFileModal'
import { onValuesChange } from '@/utils/onValuesChange'
import PermissionButton from '@/components/PermissionButton'
import useGetClassIds from '@/hooks/useGetClassIds'
import useCachePage from '@/hooks/useCachePage'
import useSearchTemplate from '@/hooks/useSearchTemplate'
import useSearchSupplier from '@/hooks/useSearchSupplier'
const Index: React.FC = () => {
  let FabricTimeout: ITimeoutType
  let ColorTimeout: ITimeoutType
  let SpuTimeout: ITimeoutType
  const DICTDATA = useAppSelector((state) => state.login.DICTDATA)
  const ProDevSeason = useGetProDevSeason()
  const [SkuOptions, setSkuOptions] = useState<IOptionItem[]>([])
  const navigate = useNavigate()
  const [form] = useForm()
  const [FormUpload] = useForm()
  const [isUploadFileShow, setisUploadFileShow] = useState<boolean>(false)
  const [exportLoading, setexportLoading] = useState(false)
  const [tempCode, setTempcode] = useState<
    | IMPORT_FILE_ENUM.GOODS_XC_IMPORT
    | IMPORT_FILE_ENUM.GOODS_UPDATE_IMPORT
    | IMPORT_FILE_ENUM.GOODS_FRANCHISE_IMPORT
    | IMPORT_FILE_ENUM.GOODS_WEIGHT_IMPORT
    | IMPORT_FILE_ENUM.BATCH_UPDATE_GOODS_FABRIC
  >(IMPORT_FILE_ENUM.GOODS_XC_IMPORT)
  //面料option
  const [FabricOptions, setFabricOptions] = useState<IOptionItem[]>([])
  //颜色option
  const [ColorOptions, setColorOptions] = useState<IOptionItem[]>([])
  //SpuOptions
  const [SpuOptions, setSpuOptions] = useState<IOptionItem[]>([])
  const [PriceOptions] = useState<IOptionItem[]>([])
  const [SeriesOptions] = useState<IOptionItem[]>([])
  const [selectedRowKeys, setselectedRowKeys] = useState<React.Key[]>([])
  const [selectedInfo, setselectedInfo] = useState<ITableData[]>([])
  const [menuItems, setmenuItems] = useState<{ key: string; label: string }[]>([])
  const [menuItemsExport, setmenuItemsExport] = useState<{ key: string; label: string }[]>([])
  const [styleExport, setstyleExport] = useState<{ key: string; label: string }[]>([])
  const buttonCodeList = useAppSelector((state) => state.login.buttonCodeList) || []
  const { classIdOptions, settinyClassIds, tinyClassIds, handleClassIdChange } = useGetClassIds()
  const { SupplierOption, handleSearchSupplier, setSupplierOption } = useSearchSupplier()
  const { TemplateOptions, handleSearchTemplate } = useSearchTemplate()
  const [spinning, setspinning] = useState<boolean>(false)
  const defaultDateRange = getRecentThreeMonths()
  const { setCachePage, getCachePage } = useCachePage()
  const { tableProps, params, setParams, search, reset } = useGetTableData<ITableData>(getSpuPageList, {
    form: form,
    defaultFieldsParams: {
      startTime: defaultDateRange,
      enableStatus: 1,
      skuEnableStatus: 1,
    },
    immediatelySend: false,
    cachePageCallback: (current, size, prevSize) => {
      const cacheData = getCachePage()
      setCachePage({
        ...cacheData,
        current: prevSize === size ? current : 1,
        size,
      })
    },
  })
  const [tableData, settableData] = useState<ITableData[]>([])
  useEffect(() => {
    settableData(tableProps.dataSource)
  }, [tableProps.dataSource])
  useEffect(() => {
    const items: { key: string; label: string }[] = []
    if (buttonCodeList.includes('onSpu')) {
      items.push({
        key: STATUSNUM.OPEN + '',
        label: '启用商品',
      })
    }
    if (buttonCodeList.includes('offSpu')) {
      items.push({
        key: STATUSNUM.CLOSE + '',
        label: '停用商品',
      })
    }
    if (buttonCodeList.includes('pushSpu')) {
      items.push({
        key: 'PUSH',
        label: '触发CB推送',
      })
    }
    setmenuItems(items)
    const itemsExport: { key: string; label: string }[] = []
    if (buttonCodeList.includes('exportSpu')) {
      itemsExport.push({
        key: '1',
        label: '无款式图导出（快速）',
      })
    }
    if (buttonCodeList.includes('exportSpu')) {
      itemsExport.push({
        key: '2',
        label: '带款式图导出',
      })
    }
    setmenuItemsExport(itemsExport)
    const styleExport: { key: string; label: string }[] = []
    if (buttonCodeList.includes('exportSpu')) {
      styleExport.push({
        key: '3',
        label: '无款式图导出（快速）',
      })
    }
    if (buttonCodeList.includes('exportSpu')) {
      styleExport.push({
        key: '4',
        label: '带款式图导出',
      })
    }
    setstyleExport(styleExport)
    handleCacheData()
  }, [])
  const handleCacheData = () => {
    const cacheData = getCachePage()
    if (cacheData == null) {
      const paramsData = {
        ...params,
        startTime: dayjs(defaultDateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs(defaultDateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
        enableStatus: 1,
        skuEnableStatus: 1,
      }
      search({
        ...paramsData,
      })
      setCachePage({ ...paramsData })
    } else {
      if (cacheData.tinyClassId && cacheData.tinyClassId.length > 0) {
        settinyClassIds(cacheData.queryClassIdList)
      }
      form.setFieldsValue({
        ...cacheData,
        startTime:
          cacheData.startTime && cacheData.endTime ? [dayjs(cacheData.startTime), dayjs(cacheData.endTime)] : null,
        queryClassIdList: cacheData.tinyClassId,
        updateStartTime:
          cacheData.updateStartTime && cacheData.updateEndTime
            ? [dayjs(cacheData.updateStartTime), dayjs(cacheData.updateEndTime)]
            : [],
        year: cacheData.year ? dayjs(cacheData.year) : null,
        enableStatus: cacheData.enableStatus != null ? cacheData.enableStatus : null,
        skuEnableStatus: cacheData.skuEnableStatus != null ? cacheData.skuEnableStatus : null,
      })
      setSupplierOption(cacheData?.SupplierOption || [])
      setSpuOptions(cacheData?.SpuOptions || [])
      setFabricOptions(cacheData?.FabricOptions || [])
      setColorOptions(cacheData?.ColorOptions || [])
      delete cacheData.SupplierOption
      delete cacheData.tinyClassId
      delete cacheData.SpuOptions
      delete cacheData.FabricOptions
      delete cacheData.ColorOptions
      search({
        ...cacheData,
        startTime: cacheData.startTime ? cacheData.startTime : null,
        endTime: cacheData.endTime ? cacheData.endTime : null,
        enableStatus: cacheData.enableStatus != null ? cacheData.enableStatus : null,
        skuEnableStatus: cacheData.skuEnableStatus != null ? cacheData.skuEnableStatus : null,
      })
    }
  }
  const selectRows = (keys: React.Key[], info: ITableData[]) => {
    setselectedRowKeys(keys)
    setselectedInfo(info)
  }
  const handleSearchColor = (newValue = '') => {
    if (ColorTimeout) {
      clearTimeout(ColorTimeout)
      ColorTimeout = null
    }
    const getOptions = async () => {
      const res = await getProductColorPageList<ITableDataColor>({ colorGroupSearchName: newValue, enableStatus: 1 })
      if (res.code === 200) {
        const data =
          res?.data?.list?.map((item) => {
            return {
              label: item.colorDetailName,
              code: item.colorCode,
              value: item.colorCode,
              rgbValue: item.rgbValue,
              picUrl: item?.picUrl,
            }
          }) || []
        setColorOptions(data)
      }
    }
    ColorTimeout = setTimeout(getOptions, 500)
  }
  const handleSearchFabric = (newValue = '') => {
    if (FabricTimeout) {
      clearTimeout(FabricTimeout)
      FabricTimeout = null
    }
    const getOptions = async () => {
      const res = await getProductFabricPageList<ITableDataFabric>({
        searchName: newValue,
        status: 1,
      })
      if (res.code === 200) {
        const data =
          res?.data?.list?.map((item) => {
            return {
              label: item.fabricName,
              code: item.fabricCode,
              value: item.fabricId,
            }
          }) || []
        setFabricOptions(data)
      }
    }
    FabricTimeout = setTimeout(getOptions, 500)
  }
  const handleSearchSpuOptions = (newValue = '') => {
    if (!newValue) return
    if (SpuTimeout) {
      clearTimeout(SpuTimeout)
      SpuTimeout = null
    }
    const getOptions = async () => {
      const res = await getSpuOptions<{
        spuName: string
        spuId: string
        spuCode: string
        designCode: string
      }>({ keyword: newValue })
      if (res.code === 200) {
        const data =
          res?.data?.map((item) => {
            return {
              label: `${item?.spuCode}｜${item.spuName}${item?.designCode ? '｜' + item?.designCode : ''}`,
              value: item.spuId,
            }
          }) || []
        setSpuOptions(data)
      }
    }
    SpuTimeout = setTimeout(getOptions, 500)
  }
  const handleClickMore = async (info: any) => {
    if (selectedRowKeys.length === 0) {
      message.warning('请勾选需要操作的列表数据！')
      return
    }
    if (info.key == STATUSNUM.OPEN || info.key == STATUSNUM.CLOSE) {
      const res = await productSpuInfoBatchUpdateStatus({
        spuCodes: selectedRowKeys,
        enableStatus: info.key == STATUSNUM.OPEN ? 1 : 0,
      }).finally(() => {
        setselectedRowKeys([])
        setselectedInfo([])
        search(params)
      })
      if (res.code === 200) {
        message.success('操作成功')
      }
      if (res.code === 820000 && res.failInfo == null) {
        notification.open({
          type: 'warning',
          message: res.msg,
        })
      }
      if (res.code === 820000 && res.failInfo) {
        const failInfo = JSON.parse(res.failInfo)?.map((item: { bizCode: string; errorMsg: string }) => {
          return (
            <div key={item.bizCode}>
              bizCode：{item.bizCode}，errorMsg：{item.errorMsg}
            </div>
          )
        })
        notification.open({
          type: 'warning',
          message: res.msg,
          description: failInfo,
        })
      }
    } else {
      if (info.key == 'PUSH') {
        if (selectedRowKeys.length === 0) {
          message.warning('请勾选需要改变状态的列表数据！')
          return
        }
        const res = await productSpuInfoPush({
          spuCodes: selectedInfo?.map((item) => item.spuCode),
        })
        if (res.code === 200) {
          message.success('触发推送成功，请稍后查看！')
          setselectedRowKeys([])
          setselectedInfo([])
          search(params)
        }
      }
    }
  }
  const onUploadFileCancel = () => {
    FormUpload.resetFields()
    setisUploadFileShow(false)
  }

  const onUploadFileOk = async () => {
    const { file } = await FormUpload.validateFields()
    setexportLoading(true)
    if (tempCode === IMPORT_FILE_ENUM.GOODS_XC_IMPORT) {
      const res = await importExcelProductSpuInfo<{ linkUrl: string }>(file).finally(() => {
        setexportLoading(false)
        FormUpload.resetFields()
      })
      const failInfo = res?.failInfo ? JSON.parse(res?.failInfo) : {}
      importNotificationByFirstErrorMsg(failInfo?.linkUrl, res?.msg)
      search(params)
      onUploadFileCancel()
      return
    }
    if (tempCode === IMPORT_FILE_ENUM.GOODS_UPDATE_IMPORT) {
      const res = await editImportExcelProductSpuInfo<{ linkUrl: string }>(file).finally(() => {
        setexportLoading(false)
        FormUpload.resetFields()
      })
      const failInfo = res?.failInfo ? JSON.parse(res?.failInfo) : {}
      importNotificationByFirstErrorMsg(failInfo?.linkUrl, res?.msg)
      search(params)
      onUploadFileCancel()
      return
    }
    let res: any
    if (tempCode === IMPORT_FILE_ENUM.GOODS_FRANCHISE_IMPORT) {
      res = await importFranchiseInfoProductSpuInfo<{ linkUrl: string }>(file).finally(() => {
        setexportLoading(false)
        FormUpload.resetFields()
      })
      if (res.code === 200) {
        notification.success({
          message: '操作成功',
        })
        search(params)
        onUploadFileCancel()
      }
    }
    if (tempCode === IMPORT_FILE_ENUM.GOODS_WEIGHT_IMPORT) {
      res = await importWeightInfoProductSpuInfo<{ linkUrl: string }>(file).finally(() => {
        setexportLoading(false)
        FormUpload.resetFields()
      })
      if (res.code === 200) {
        notification.success({
          message: '操作成功',
        })
        search(params)
        onUploadFileCancel()
      }
    }
    if (tempCode === IMPORT_FILE_ENUM.BATCH_UPDATE_GOODS_FABRIC) {
      res = await importProductFabricForSpu<{ linkUrl: string }>(file).finally(() => {
        setexportLoading(false)
        FormUpload.resetFields()
      })
      if (res.code === 200) {
        notification.success({
          message: '操作成功',
        })
        search(params)
        onUploadFileCancel()
      }
    }
    if (res?.code === 820000) {
      onUploadFileCancel()
      notification.open({
        type: 'warning',
        message: res?.msg,
      })
    }
  }
  const reLoadPage = () => {
    search(params)
  }
  const handleClickMoreExport = async (info: any) => {
    const paramsData: Record<string, any> = {}
    if (selectedRowKeys.length > 0) {
      paramsData.spuIds = selectedInfo.map((item) => item.spuId)
    } else {
      Object.assign(paramsData, params)
    }
    setexportLoading(true)
    setspinning(true)
    const res = await exportExcelProductSpuInfo({
      ...paramsData,
      withPic: info.key == '1' || info.key == '3' ? 0 : 1,
      withSku: info.key == '1' || info.key == '2' ? 1 : 0,
      skuEnableStatus: form.getFieldValue('skuEnableStatus'),
    })
      .catch(() => setspinning(false))
      .finally(() => {
        setexportLoading(false)
        setselectedRowKeys([])
        setselectedInfo([])
      })
    if (res?.code === 200 && res?.data) {
      await exportNotification(res?.data, navigate).finally(() => setspinning(false))
    }
  }
  return (
    <PageContainer className="goods_manage_page">
      <SearchForm
        onValuesChange={(changedValues) => onValuesChange(changedValues, ['planNo'], form)}
        params={params}
        form={form}
        searchConfig={[
          {
            label: 'SPU商品',
            name: 'spuId',
            type: 'Select',
            placeholder: '款式编码/款式名称/助记码',
            option: SpuOptions,
            config: {
              suffixIcon: null,
              showSearch: true,
              filterOption: false,
              optionFilterProp: 'label',
              onSearch: handleSearchSpuOptions,
              notFoundContent: <Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
            },
          },
          {
            label: 'SKU商品',
            name: 'skuCodeList',
            placeholder: '商品条码',
            type: 'Select',
            option: SkuOptions,
            config: {
              mode: 'tags',
              maxTagCount: 'responsive',
              notFoundContent: null,
            },
          },
          {
            label: '采购方式',
            name: 'purchaseType',
            type: 'Select',
            option: PURCHASEWAY_OPTIONS,
            config: {
              showSearch: true,
              optionFilterProp: 'label',
            },
          },
          { label: '创建时间', name: 'startTime', type: 'RangePicker', config: { showTime: true } },
          { label: '更新时间', name: 'updateStartTime', type: 'RangePicker', config: { showTime: true } },
          {
            name: 'queryClassIdList',
            label: '款式分类',
            type: 'Cascader',
            option: classIdOptions,
            placeholder: '请选择款式分类',
            config: {
              changeOnSelect: true,
              onChange: handleClassIdChange,
              onClear: () => settinyClassIds([]),
              fieldNames: { label: 'className', value: 'classConfigId', children: 'childrenList' },
            },
          },
          {
            name: 'materialsKeyword',
            label: '面料',
            type: 'Input',
            placeholder: '面料名称/面料编码',
          },
          {
            name: 'colorCode',
            label: '款式色',
            type: 'Select',
            option: ColorOptions,
            placeholder: '请选择款式色',
            config: {
              suffixIcon: null,
              showSearch: true,
              filterOption: false,
              optionFilterProp: 'label',
              onSearch: handleSearchColor,
              notFoundContent: <Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
            },
          },
          {
            label: '年份',
            name: 'year',
            type: 'DatePicker',
            config: {
              picker: 'year',
              format: 'YYYY',
            },
          },
          {
            name: 'mainSupplierCodes',
            label: '供应商',
            type: 'Select',
            option: SupplierOption,
            config: {
              suffixIcon: null,
              showSearch: true,
              optionFilterProp: 'label',
              mode: 'multiple',
              maxTagCount: 'responsive',
              filterOption: false,
              onSearch: handleSearchSupplier,
              notFoundContent: <Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
            },
          },
          // { label: '适销季节', name: 'seasonCode', type: 'Select', option: DICTDATA.sales_season },
          { label: '开发季', name: 'seasonId', type: 'Select', option: ProDevSeason },
          { label: '商品企划编号', name: 'planNo', type: 'Input' },
          {
            label: '吊牌价',
            name: 'tagPrices',
            type: 'Select',
            option: PriceOptions,
            placeholder: '支持输入多个吊牌价',
            config: {
              mode: 'tags',
              maxTagCount: 'responsive',
              notFoundContent: null,
            },
          },
          {
            label: '商品系列',
            name: 'productSeries',
            type: 'Select',
            option: SeriesOptions,
            placeholder: '支持输入多个商品系列',
            config: {
              mode: 'tags',
              maxTagCount: 'responsive',
              notFoundContent: null,
            },
          },
          {
            name: 'seasonGroups',
            label: '季节分组',
            type: 'Select',
            option: DICTDATA.season_classify,
            placeholder: '请选择季节分组',
            config: {
              suffixIcon: null,
              showSearch: true,
              optionFilterProp: 'label',
              filterOption: true,
              mode: 'multiple',
              maxTagCount: 'responsive',
            },
          },
          {
            name: 'productTemplates',
            label: '商品信息模板',
            type: 'Select',
            option: TemplateOptions,
            placeholder: '请选择商品信息模板',
            config: {
              suffixIcon: null,
              showSearch: true,
              filterOption: false,
              optionFilterProp: 'label',
              mode: 'multiple',
              onSearch: handleSearchTemplate,
              notFoundContent: <Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
            },
          },
          { label: '状态', name: 'enableStatus', type: 'Select', option: STATUSBANDOPTIONS },
          {
            label: '推送状态',
            name: 'pushStatus',
            type: 'Select',
            option: PUSH_STATE_STATUS_OPTIONS,
          },
          { label: '条码状态', name: 'skuEnableStatus', type: 'Select', option: STATUSBANDOPTIONS_SPEC },
        ]}
        onFinish={(vals: any) => {
          setselectedRowKeys([])
          setselectedInfo([])
          const paramsData = {
            ...vals,
            queryClassIdList: tinyClassIds.length > 0 ? tinyClassIds : null,
            startTime: vals?.startTime?.[0] && dayjs(vals.startTime[0]).format('YYYY-MM-DD HH:mm:ss'),
            endTime: vals?.startTime?.[1] && dayjs(vals.startTime[1]).format('YYYY-MM-DD HH:mm:ss'),
            updateStartTime: vals?.updateStartTime?.[0] && dayjs(vals.updateStartTime[0]).format('YYYY-MM-DD HH:mm:ss'),
            updateEndTime: vals?.updateStartTime?.[1] && dayjs(vals.updateStartTime[1]).format('YYYY-MM-DD HH:mm:ss'),
            year: vals.year && dayjs(vals.year).format('YYYY'),
            mainSupplierCodes:
              vals.mainSupplierCodes && vals.mainSupplierCodes.length > 0 ? vals.mainSupplierCodes : null,
          }
          search({
            ...paramsData,
          })
          setCachePage({
            ...paramsData,
            tinyClassId: vals.queryClassIdList,
            SupplierOption,
            SpuOptions,
            FabricOptions,
            ColorOptions,
            current: 1,
            size: params.size,
          })
        }}
        onReset={() => {
          setselectedRowKeys([])
          setselectedInfo([])
          settinyClassIds([])
          reset()
          const paramsData = {
            current: 1,
            size: 10,
            startTime: dayjs(defaultDateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
            endTime: dayjs(defaultDateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
            enableStatus: 1,
            skuEnableStatus: 1,
          }
          setCachePage({ ...paramsData })
        }}
        extra={
          <div className="table_extra_flex_wrapbox">
            <div className="table_extra_flex">
              <PermissionButton
                permission="batchAddOutSpu"
                type="primary"
                onClick={() => {
                  setTempcode(IMPORT_FILE_ENUM.GOODS_XC_IMPORT)
                  setisUploadFileShow(true)
                }}
                icon={<ImportOutlined />}
              >
                批量新建商品（现采）
              </PermissionButton>
              <PermissionButton
                permission="batchEditSpu"
                onClick={() => {
                  setTempcode(IMPORT_FILE_ENUM.GOODS_UPDATE_IMPORT)
                  setisUploadFileShow(true)
                }}
                icon={<ImportOutlined />}
              >
                批量更新商品信息
              </PermissionButton>
              <PermissionButton
                permission="editSpuFranchise"
                onClick={() => {
                  setTempcode(IMPORT_FILE_ENUM.GOODS_FRANCHISE_IMPORT)
                  setisUploadFileShow(true)
                }}
                icon={<ImportOutlined />}
              >
                导入加盟信息
              </PermissionButton>
              <PermissionButton
                permission="editSpuWeight"
                onClick={() => {
                  setTempcode(IMPORT_FILE_ENUM.GOODS_WEIGHT_IMPORT)
                  setisUploadFileShow(true)
                }}
                icon={<ImportOutlined />}
              >
                导入商品重量(按箱)
              </PermissionButton>
              <PermissionButton
                permission="batchUpdateGoodsFabric"
                onClick={() => {
                  setTempcode(IMPORT_FILE_ENUM.BATCH_UPDATE_GOODS_FABRIC)
                  setisUploadFileShow(true)
                }}
                icon={<ImportOutlined />}
              >
                批量更新商品关联面料
              </PermissionButton>
              {menuItems?.length > 0 ? (
                <Dropdown
                  placement="bottomLeft"
                  menu={{
                    items: menuItems,
                    onClick: handleClickMore,
                  }}
                >
                  <Button>
                    更多操作
                    <DownOutlined />
                  </Button>
                </Dropdown>
              ) : null}
            </div>
            <div className="table_extra_flex">
              {menuItemsExport.length > 0 ? (
                <Dropdown
                  placement="bottomLeft"
                  menu={{
                    items: menuItemsExport,
                    onClick: handleClickMoreExport,
                  }}
                >
                  <Button>
                    导出条码明细
                    <DownOutlined />
                  </Button>
                </Dropdown>
              ) : null}
              {styleExport.length > 0 ? (
                <Dropdown
                  placement="bottomLeft"
                  menu={{
                    items: styleExport,
                    onClick: handleClickMoreExport,
                  }}
                >
                  <Button>
                    导出款式
                    <DownOutlined />
                  </Button>
                </Dropdown>
              ) : null}
            </div>
          </div>
        }
      ></SearchForm>
      <CustomTable
        bordered
        isSelection
        selectRows={selectRows}
        rowKey={(rows) => rows.spuCode}
        selectedRowKeys={selectedRowKeys}
        columns={useIndexColumns({
          navigate,
          reLoadPage,
          editSpuPicture: buttonCodeList.includes('editSpuPicture'),
          tableData,
          settableData,
        })}
        {...tableProps}
        isScrollY
      />
      <ImportFileModal
        loading={exportLoading}
        open={isUploadFileShow}
        onCancel={onUploadFileCancel}
        onOk={onUploadFileOk}
        form={FormUpload}
        tempCode={tempCode}
      ></ImportFileModal>
      <Spin spinning={spinning} fullscreen />
    </PageContainer>
  )
}

export default Index
